<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>This Is Exercise</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--<form action="action.php" method="post">-->
    <!--<input type="text" name="username">-->
    <!--<input type="password" name="password">-->
    <!--<button>提交</button>-->
    <!--<a href="action.php?fid=1&tid=2">Remote Link</a>-->
<!--</form>-->
<div id="app-5">
    <p>{{ message }}</p>
    <input type="text" v-model="message">
    <button v-on:click="reverseMessage">reverseMessage</button>
</div>
</body>
<script type="text/javascript">
    var app5 = new Vue({
        el: '#app-5',
        data: {
            message: 'hello, Vue.js!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })

    function createKeyToOldIdx (children, beginIdx, endIdx) {
        let i, key
        const map = {}
            for (i = beginIdx; i <= endIdx; ++i) {
            key = children[i].key
                if (isDef(key)) map[key] = i
            }
            return map;
    }




    // 接口请求日志，继承于日志基类MonitorBaseInfo
    function HttpLogInfo(uploadType, url, status, statusText, statusResult, currentTime) {
        setCommonProperty.apply(this);
        this.uploadType = uploadType;
        this.httpUrl = utils.b64EncodeUnicode(url);
        this.status = status;
        this.statusText = statusText;
        this.statusResult = statusResult;
        this.happenTime = currentTime;
    }

    /**
     * 页面接口请求监控
     */
    function recordHttpLog() {
        // 监听ajax的状态
        function ajaxEventTrigger(event) {
            var ajaxEvent = new CustomEvent(event, {
                detail: this
            });
            window.dispatchEvent(ajaxEvent);
        }
        var oldXHR = window.XMLHttpRequest;
        function newXHR() {
            var realXHR = new oldXHR();
            realXHR.addEventListener('abort', function () { ajaxEventTrigger.call(this, 'ajaxAbort'); }, false);
            realXHR.addEventListener('error', function () { ajaxEventTrigger.call(this, 'ajaxError'); }, false);
            realXHR.addEventListener('load', function () { ajaxEventTrigger.call(this, 'ajaxLoad'); }, false);
            realXHR.addEventListener('loadstart', function () { ajaxEventTrigger.call(this, 'ajaxLoadStart'); }, false);
            realXHR.addEventListener('progress', function () { ajaxEventTrigger.call(this, 'ajaxProgress'); }, false);
            realXHR.addEventListener('timeout', function () { ajaxEventTrigger.call(this, 'ajaxTimeout'); }, false);
            realXHR.addEventListener('loadend', function () { ajaxEventTrigger.call(this, 'ajaxLoadEnd'); }, false);
            realXHR.addEventListener('readystatechange', function() { ajaxEventTrigger.call(this, 'ajaxReadyStateChange'); }, false);
            return realXHR;
        }

        window.XMLHttpRequest = newXHR;
        window.addEventListener('ajaxLoadStart', function(e) {
            var currentTime = new Date().getTime()
            setTimeout(function () {
                var url = e.detail.responseURL;
                var status = e.detail.status;
                var statusText = e.detail.statusText;
                if (!url || url.indexOf(HTTP_UPLOAD_LOG_API) != -1) return;
                var httpLogInfo = new HttpLogInfo(HTTP_LOG, url, status, statusText, "发起请求", currentTime);
                httpLogInfo.handleLogInfo(HTTP_LOG, httpLogInfo);
            }, 2000)
        });
        window.addEventListener('ajaxLoadEnd', function(e) {
            var currentTime = new Date().getTime()
            var url = e.detail.responseURL;
            var status = e.detail.status;
            var statusText = e.detail.statusText;
            if (!url || url.indexOf(HTTP_UPLOAD_LOG_API) != -1) return;
            var httpLogInfo = new HttpLogInfo(HTTP_LOG, url, status, statusText, "请求返回", currentTime);
            httpLogInfo.handleLogInfo(HTTP_LOG, httpLogInfo);
        });

    }




    /**
     * 定义了一个公共的 filter
     * 用于处理一些 通用的页面拦截逻辑
     * @param resolve
     * @param rejected
     */
    var filter = function (resolve, reject) {

        let excutors = []

        // 以下定义你的过滤器，按顺序执行
        new Filter1(excutors, promiseQueue);
        new Filter2(excutors, promiseQueue);
        new Filter3(excutors, promiseQueue);


        promiseQueue(excutors).then(() => {
            resolve(true)
        }).catch(cb => {
            reject(cb)
        })

    }

    function promiseQueue (executors, letGo) {
        return new ES6Promise((resolve, reject) => {
            if (!Array.isArray(executors)) {
                executors = Array.from(executors)
            }
            if (executors.length <= 0) {
                return resolve([])
            }

            var res = []
            executors = executors.map((x, i) => () => {
                var p = typeof x === 'function' ? new ES6Promise(x) : ES6Promise.resolve(x)
                p.then(response => {
                    res[i] = response
                    if (i === executors.length - 1) {
                        resolve(res)
                    } else {
                        executors[i + 1]()
                    }
                }, reject)
            })
            executors[0]()
            if (letGo) {
                resolve(true)
            }
        })
    }
</script>
</html>